<template>
  <div class="score">
    <span>体验</span>
    <!-- Rate 评分组件 -->
    <van-rate
        class="rate"
        v-model="value1"
        :size="25"
        void-icon="star"
        void-color="#eee"
    />
    <br />
    <span>质量</span>
    <!-- Rate 评分组件 -->
    <van-rate
        class="rate"
        v-model="value2"
        :size="25"
        void-icon="star"
        void-color="#eee"
    />
    <!-- Field 输入框组件 -->
    <van-field
        v-model.trim="message"
        rows="4"
        autosize
        label="建议"
        type="textarea"
        maxlength="200"
        placeholder="请输入您的建议"
        show-word-limit
    />
    <!-- Button 按钮组件 点击保存 -->
    <van-button
      type="primary"
      block
      color="#1989fa"
      @click="handleSubmit"
    >
      提交
    </van-button>
  </div>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant'
Vue.use(Toast)
export default {
  name: 'score',
  data () {
    return {
      value1: 0,
      value2: 0,
      message: '',
      timeout: '',
    }
  },
  methods: {
    handleSubmit () {
      if (!this.value1) {
        Toast.fail('请对app体验打分')
        return
      } else if (!this.value2) {
        Toast.fail('请对app质量打分')
        return
      }
      // 提示添加成功
      Toast.success({
        message: '提交成功',
        forbidClick: true,
      })
      // 1 秒之后跳转到明细页面，提升用户体验
      this.timeout = setTimeout(() => {
        this.$router.push({
          name: 'mine',
        })
      }, 1000)
    },
  },
  beforeDestroy () {
    clearTimeout(this.timeout)
  },
}
</script>

<style lang="less" scoped>
.rate{
    margin: 5px 0;
    margin-left: 70px;
}
/deep/.van-cell{
    margin-top: 10px;
    margin-bottom: 20px;
}
span{
    font-size: 14px;
    margin-left: 18px;
}
</style>
